<template>
  <div>
    <!-- 公告搜索 -->
    <div class="div1">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <i class="header-icon el-icon-search" @click="alert('好使')"></i
            ><span class="collapsetitle">查询公告信息</span>
          </template>
          <div class="collapsediv1">
            <span style="font-size: 15px">公告标题:</span
            ><el-input v-model="PersonnelName" class="input1"></el-input>
            <el-button type="primary" @click="GetDep()">查询</el-button>
            <el-button type="primary" @click="openAdd()">发布公告</el-button>
            <el-button type="primary">删除</el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 公告显示 -->
    <div class="div2">

      <el-collapse v-model="activeNames">
        <el-collapse-item name="2">
          <template slot="title">
            <i class="header-icon el-icon-s-order"></i
            ><span class="collapsetitle">信息列表</span>
          </template>
          <div class="collapsediv1">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              class="table1"
              @selection-change="handleSelectionChange"
              stripe
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="Nid" label="序号"> </el-table-column>
              <el-table-column prop="Ntitel" label="公告标题">
              </el-table-column>
              <el-table-column prop="PersonnelNamea" label="发出人">
              </el-table-column>
              <el-table-column prop="PersonnelName" label="接收人">
              </el-table-column>
              <el-table-column prop="Ntime" label="发出时间"> </el-table-column>

              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="DelPer(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageindex"
                :page-sizes="[1, 5, 10, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagetotal"
              >
              </el-pagination>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    
    <transition name="el-fade-in">
      <el-card class="box-card" v-show="showadd">
        <div slot="header" class="clearfix">
          <span>发布公告</span>
        </div>
        <div>
          <el-form ref="form" :model="form" label-width="80px" size="mini">
            <el-row>
              <el-col :span="8">
                <el-form-item label="公告标题:">
                  <el-col :span="20">
                    <el-input
                      v-model="form.ntitel"
                      maxlength="10"
                      show-word-limit
                    ></el-input>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="选择部门:">
                  <el-col :span="22">
                    <el-select v-model="value" placeholder="请选择" @change="selePer()">
                      <el-option
                        v-for="item in superoptions"
                        :key="item.DepId"
                        :label="item.DepName"
                        :value="item.DepId"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="接收人:">
                  <el-col :span="22">
                    <el-select v-model="value1" multiple placeholder="请选择">
                      <el-option
                        v-for="item in superPer"
                        :key="item.PersonnelId"
                        :label="item.PersonnelName"
                        :value="item.PersonnelId"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="内容">
              <div id="div1"></div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Addrn">立即发布</el-button>
              <el-button @click="closeAdd">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </transition>
  </div>
</template>
<script>
import E from "wangeditor";
export default {
  data() {
    return {
      PersonnelName: "",
      handleSelectionChange: "",
      activeNames: ["1", "2"],
      pageindex: 1,
      pagesize: 5,
      pagetotal: 0,
      showadd: false,
      tableData: [],
      form: {},
      text: "",
      editorData: "",
      superoptions: [], //部门
      superPer:[],
      value:'',
      value1:[],
    };
  },
  mounted: function () {
    const editor = new E("#div1");
    editor.config.onchange = (newHtml) => {
      this.form.NTxt = newHtml;
    };

    //创建   --创建之后可以重新初始化内容:editor.txt.html('初始化')
    editor.create();
  },
  methods: {
    GetNper() {
      this.$http
        .get("Notice/GetPer?", {
          params: {
            PersonnelName: this.PersonnelName,
            pageindex: this.pageindex,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          this.tableData = res.data.PageData;
          this.pagetotal = res.data.PageTotal;
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.GetNper();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageindex = val;
      this.GetNper();
      console.log(`当前页: ${val}`);
    },
    openAdd() {
      this.form = {};
      this.showadd = true;
    },
    closeAdd() {
      this.form = {};
      this.showadd = false;
    },
    //添加公告
    Addrn() {
      // this.$http.post("Notice/AddUR", this.form).then((res) => {
      //   if (res.data.Code == 200) {
      //     this.GetPer();
      //     
      //   } else {
      //     this.GetPer();
      //     this.$notify.error({
      //       title: "错误",
      //       message: res.data.Message,
      //     });
      //   }
      // });
      this.$notify({
            title: "成功",
            message: "添加成功",
            type: "success",
          });
    },
    //部门下拉
    superDep() {
      this.$http.get("Institutionalsetting/selecDep").then((res) => {
        this.superoptions = res.data.Data;
      });
    },
    //按部门搜索人员下拉框
    selePer(){
      this.$http.get("Notice/selecPer?depId="+this.value).then(res=>{
          this.superPer=res.data.Data;
        })
    }
  },
  created() {
    this.GetNper();
    this.superDep();
  },
  computed: {},
};
</script>
 <style  scoped>
.collapsetitle,
.header-icon {
  color: white;
  font-size: 20px;
  margin-left: 10px;
}
.collapsediv1 {
  margin-top: 20px;
  margin-left: 20px;
}
.input1 {
  width: 200px;
  margin-left: 10px;
  margin-right: 10px;
}
.div2 {
  margin-top: 20px;
}
.table1 {
  width: 99%;
  border: 1px solid #eceef5;
  border-radius: 6px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-top: 30px;
  border: 1px solid #eceef5;
}
</style>
<style>
.el-collapse-item__header {
  background-color: #7accc6;
  height: 30px;
  border-radius: 4px 4px 0px 0px;
}
.el-collapse {
  border-radius: 6px;
}
.el-collapse-item__wrap {
  border-radius: 0px 0px 6px 6px;
  border: 1px solid #7accc6;
  border-top: 0px solid #7accc6;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #7accc6;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
.w-e-toolbar {
  z-index: 2 !important;
}
</style>
